<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%- include('viewImport/css.ejs') %>
    <title>视频播放</title>
</head>
<body>
    <%- include('common/nav.ejs') %>
    
    <div class="player-container container">
        <div class="video-wrapper">
            <video id="media-player" controls></video>
            <div class="video-info">
                <h2 class="video-title"><%= media.title || '视频标题' %></h2>
                <div class="author-info">
                    <img src="<%= media.authorImg || '/images/default_avatar.png' %>" alt="作者头像" class="author-avatar">
                    <span class="author-name"><%= media.author || '作者' %></span>
                </div>
                <div class="video-stats">
                    <span class="views"><i class="fa fa-eye"></i> <%= media.watchVolue || '0' %></span>
                    <span class="likes"><i class="fa fa-heart"></i> <%= media.likeVolue || '0' %></span>
                </div>
                <p class="video-desc"><%= media.introduction || '视频描述' %></p>
            </div>
            <div class="player-controls">
                <button id="play-pause" class="fa fa-play"></button>
                <input type="range" id="progress-bar" min="0" max="100" value="0">
                <span class="time-display">00:00 / <%= media.videoTime || '00:00' %></span>
                <button id="fullscreen" class="fa fa-expand"></button>
                <button id="pip-toggle" class="fa fa-clone"></button>
                <select id="playback-rate">
                    <option value="0.5">0.5x</option>
                    <option value="1.0" selected>1.0x</option>
                    <option value="1.5">1.5x</option>
                    <option value="2.0">2.0x</option>
                </select>
                <div class="volume-control">
                    <button id="mute" class="fa fa-volume-up"></button>
                    <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
                </div>
            </div>
        </div>
        
        <div class="recommendations">
            <h3>相关推荐</h3>
            <div class="recommend-list">
                <!-- 相关推荐视频列表 -->
            </div>
        </div>
    </div>
    
    <%- include('common/footer_default.ejs') %>
    <%- include('viewImport/js.ejs') %>
    <script src="/javascripts/mediaPlayer.js"></script>
</body>
</html>